<!--一线数据查询-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
        <div class="flex">
            <div class="search-container-item right87">
                <div class="item-name">学期：</div>
                <el-select v-model="dataForm.xueqi" placeholder="请选择" style="width: 110px" size="mini">
                <el-option v-for="item in xq" :key="item.id" :label="item.xqmc" :value="item.xqmc"></el-option>
                </el-select>
            </div>
            <div class="search-container-item right87">
                <div class="item-name">周次：</div>
                <el-select v-model="dataForm.zhouci" placeholder="请选择" style="width: 110px" size="mini">
                  <el-option v-for="item in zcList" :key="item.zhouci" :label="item.zhouci" :value="item.zhouci"></el-option>
                </el-select>
            </div>
            <div class="search-container-item right87" v-if="roleId == '1490859421955674114'">
                <div class="item-name">人员类别：<a class="star">*</a></div>
                <el-select v-model="dataForm.roleId" placeholder="请选择" style="width: 110px" size="mini">
                <el-option v-for="item in roleList" :key="item.id" :label="item.xqmc" :value="item.xqmc"></el-option>
                </el-select>
            </div>
            <div class="search-container-item right87" v-if="roleId == '1490859421955674114'">
                <div class="item-name">姓名：</div>
                <el-select v-model="dataForm.userId " placeholder="请选择" style="width: 110px" size="mini">
                <el-option v-for="item in xq" :key="item.id" :label="item.xqmc" :value="item.xqmc"></el-option>
                </el-select>
            </div>
            <div class="search-button color-primary width70" @click="getList">
                <img src="../../../assets/assessment/icon-search.png" alt="" />
                <span>查询</span>
            </div>
      </div>
      <div class="btn-group" v-if="roleId == '1490859421955674114'">
        <div class="search-button color-primary width70" @click="passData">
            <img src="../../../assets/assessment/icon-pass.png" alt="" />
            <span>通过</span>
        </div>
        <div class="search-button width70" @click="dfData()">
            <img src="../../../assets/assessment/icon-ydh.png" alt="" />
            <span>打回</span>
        </div>
      </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" @selection-change="handleSelectionChange" >
        <el-table-column type="selection" align="center" width="80" v-if="roleId == '1490859421955674114'"> </el-table-column>
        <el-table-column prop="state" label="状态/操作" align="center" width="150" v-if="roleId != '1490859421955674114'" fixed="left">
          <template slot-scope="scope">
            <!-- 1.编辑中,2.已提交,3.已打回 -->
            <!-- <span class="pass">已通过</span> -->
            <span class="pass" v-if="scope.row.state == 1">编辑中</span>
            <!-- <span class="wait" @click="dfData(scope.row.id)">打回</span> -->
            <span class="wait" v-if="scope.row.state == 2">已提交</span>
            <span v-if="scope.row.state == 2" class="search-button edit-green width70" @click="editInfo(scope.row.id)">
              <img src="../../../assets/assessment/icon-plan-record-detail.png">
              <span>修改</span>
            </span>
            <span class="wait" v-if="scope.row.state == 3">已打回</span>
          </template>
        </el-table-column>
        <el-table-column v-for="(i,k) in headerData" :key="k" :prop="i.fieldCode" :label="i.fieldName" align="center" min-width="150"></el-table-column>
        <el-table-column prop="count" label="打回原因" align="center" width="200" v-if="roleId != '1490859421955674114'"></el-table-column>
      </el-table>
      <div class="export-button" @click="importExcel">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <span>导出Excel</span>
      </div>
      <h1 class="total-notice">当前共找到{{total}}条记录，当前显示{{(dataForm.current-1)*50}}-{{dataForm.current*50}}条</h1>
    </div>
    <div class="pagination-block">
      <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
        :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <div class="center">
        <div class="search-button color-warning width70" @click="publish"><span>发布</span></div>
    </div>
    <el-dialog title="打    回" :visible.sync="dialogReturn" :close-on-click-modal="false">
			<div class="dh">
        <div class="item-name">打回原因:</div>
        <el-input type="textarea" v-model="remarks" :rows="6" placeholder="自适应输入框 会写填报的信息哪里有误, 打回至某人员修改."></el-input>
			</div>
      <div class="button-group" slot="footer">
        <div class="" @click="dhParams">保存</div>
        <div class="" @click="dialogReturn=false">取消</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {dataList,rejectLineData,dataConfigList} from "@/api/lineData";
import fileDownload from "js-file-download"
import Axios from 'axios'
import { getStore } from '@/util/store.js'
export default {
  data() {
    return {
      dialogReturn:false,
      roleType:2,//1：管理员2：其它
      xq:[],//学期
      roleList:[],//人员类别
      IDS:[],
      dataForm:{
        roleId :'',//角色ID
        userId:'',//填写人ID
        xueqi :'',//学期
        zhouci:'全部',//周次
        size:50,
        current:1,
      },
      isSingle:true,
      tableData: [
          {count:1}
      ],
      total:1,
      remarks:'',
      headerData:[],//动态头部
      zcList:'',
      roleId:'',
    };
  },
  created() {
    const userInfo = getStore({
      name: "userInfo",
      debug: true,
    }) || {}
    this.roleId = userInfo.content.role_id;
  },
  mounted(){
    //获取周次
    this.commonApi.getWeeks({riqi:'',xueqi:''}).then(res=>{
      this.zcList = [{zhouci:'全部'},...res.data.termRemarksList]
    })
    //学期列表
    this.commonApi.getXQOption().then(res=>{
      this.xq = res.data;
      this.commonApi.getCurrentXQ().then(mes=>{
        this.dataForm.xueqi = mes.data.xqmc;
        this.xueqiID = mes.data.xqmc;
        this.getList();
      })
    })
    this.initTableHeader()
  },
  methods: {
      //当前页
      currentPage(e){
        this.dataForm.current = e;
        this.getList()
      },
      async getList(){
        let params = {
          ...this.dataForm,
          zhouci:this.dataForm.zhouci == '全部'?'':this.dataForm.zhouci
        }
        let res = await dataList(params)
        this.tableData = res.data.records
        this.total =  res.total
      },
      handleSelectionChange(e){
        let IDS = [];
        IDS = e.map(item=>item.id)
        this.IDS = IDS;
      },
      async initTableHeader(){
        let res = await dataConfigList({xueqi:'',roleId:''});
        if(res.code == 200){
          let tableData = [];
          let data = res.data;
          for(let i in data){
            tableData.push(...data[i])
          }
          let headerData = tableData.filter(item=>item.isUse == 1);
          this.headerData = headerData
        }
      },
      // 打回
      dfData(isRow){
        this.dialogReturn = true;
        if(isRow){
          this.IDS = isRow;
          this.isSingle = true;
        }else{
          if(this.IDS.length<1){
           this.$message({
              message: '请选择要操作的数据！',
              type: 'warning'
            });
          }else{
            this.isSingle = false;
          } 
        }
      },
      async dhParams(){
        let res = await rejectLineData({list:this.IDS,remarks:this.remarks});
        if(res.code == 200){
          if(!this.isSingle){
            this.IDS = [];
          }
          this.dataForm.current = 1
          this.initList();
          this.$message.success('操作成功！');
          this.dialogReturn = false;
        }
      },
      //通过
      passData(){
      },
      // 发布
      publish(){
      },
      //导出
      importExcel(){
        Axios({
          method: 'get',
          url: this.$store.state.studentUrl.baseUrl+'/frontlineData/export',
          params:this.dataForm,
          headers: {'Content-Type': 'application/octet-stream' },
              responseType: 'blob'
        }).then(res => {
            fileDownload(res.data, '一线数据.xlsx');
        }); 
      },
      //跳转一线数据填报
      editInfo(id){
        this.$router.push({
          path:'/teaching/frontlineData/filling/filling',
          query:{
            id:id
          }
        })
      },
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

 /deep/ .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.search-container {
  justify-content: space-between !important;
  align-items: center;
}
.flex{display: flex;}
.width70{width: 70px;}
.bottomBtn{
    display: flex;
    /deep/.export-button{
        &:nth-child(1){
            width: 150px;
            margin-right: 30px;
        }
        &:nth-child(2){
            span{
                color: #F86900
            }
            width: 92px;
            background: #FEF1E8;
            border: 1px solid #F86900;
        }
    }
}
.right87{
    margin-right: 20px;
}
.item-name {
  color: #004ca7;
  position: relative;
  .star{
    position: absolute;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FF3819;
    top: -6px;
    right: 6px;
  }
}
.total-notice{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004CA7;
    margin-top:10px
}
.btn-group{
    display: flex;
    .search-button{
        &:nth-child(1){margin-right: 20px;}
        &:nth-child(2){
            background: #FFEFEF;
            border: 1px solid #FF3819;
            span{color: #FF3819;}
        }
    }
}
.color-warning{
    background: #FEF1E8;
    border: 1px solid #F86900;
    >span{color: #F86900;}
}
.center{
    display: flex;
    justify-content: center;
}
.edit-green{
  color: #02C86C;
  background: #F1FFF8;
  border: 1px solid #02C86C;
  margin: 4px auto 0;
  width: 78px;
}
.pass{color: #51AEF6;}
.wait{color: #FF3819;}
.dh{
  display: flex;
  justify-content: center;
  
  .item-name{
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 0px;
    color: #004CA7;
    margin-right: 16px;
    margin-top: 10px;
  }
  .el-textarea{width: 462px;}
}
 /deep/.button-group{
    padding-bottom: 20px;
    margin-top: 50px;
  }
</style>
